<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>后台登录</title>
  {{!-- 引入boostrap做布局使用 --}}
  <link rel="stylesheet" href="/bootstrap-lib/bootstrap.min.css">
  <link rel="stylesheet" href="/bootstrap-lib/bootstrap-icons.min.css">
  <style>

  </style>
</head>
<body>
  <div class="container mt-5">
    <h1 class="text-center">管理员登录</h1>
    {{#if message}}
      <div class="alert alert-danger" role="alert">
        {{message}}
      </div>
    {{/if}}
    <form action="/admin/login" method="POST" class="mt-4">
      <div class="mb-3">
        <label for="username" class="form-label">用户名称</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名称"/>
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">密码</label>
        <input type="password" class="form-control" id="password"  name="password" placeholder="请输入密码"/>
      </div>
      <div class="mb-3">
        <label for="captcha" class="form-label">验证码</label>
        <div style="display: flex">
          <input type="text" class="form-control" id="captcha"  name="captcha" placeholder="验证码"/>
          <div id="captchaCode"></div>
        </div>
      </div>
      <div style="display: flex;justify-content: center">
        <button type="submit" class="btn btn-primary">登录</button>
      </div>
    </form>
  </div>
</body>
<script src="/bootstrap-lib/bootstrap.bundle.min.js"></script>
<script src="/axios.min.js"></script>
<script src="/echarts.min.js"></script>
<script>
  const getCaptcha = () => {
    axios.get('/admin/captcha').then(res=>{
      let captchaEl = document.querySelector('#captchaCode');
      captchaEl.innerHTML = res.data;
    })
  }
  window.onload = () =>{
    getCaptcha();
    let captchaEl = document.querySelector('#captchaCode');
    captchaEl.onclick = getCaptcha;
  }
</script>
</html>
